<template>
    <div class="like">
        <!-- 我喜欢 -->
        <div class="top">
            <img :src="likeList[0]?.al?.picUrl || 'https://img.zcool.cn/community/03196b456d7e744000001490d57799f.jpg'"
                alt="">
            <div class="history-play-list-title">
                <div>我喜欢的音乐</div>
                <div class="user">
                    <img :src="getUser()?.avatarImgIdStr || 'https://img.zcool.cn/community/03196b456d7e744000001490d57799f.jpg'"
                        alt="" srcset="">
                    <div>{{ getUser()?.userName }}</div>
                </div>
                <button @click="playAllSong">播放全部 {{ likeList.length }}</button>
            </div>
        </div>
        <!-- 歌曲列表 -->
        <MusicList :data="likeList" />
        <!-- 加载中状态动画 -->
        <div style="position: absolute;top: 50vh;width: 100%;background: rgba(0,0,0,0.4);" v-loading="loading"
            element-loading-text="加载歌单列表中🍒...">
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, toRefs } from 'vue';
import { getMusicDetail } from "@/api/music/index";
import useCounterStore from '@/stores/counter';
import MusicList from '@/components/musicList.vue';
import { getUser } from '@/utils/auth'

const { musicLikeListId, playList, songInfo } = toRefs(useCounterStore());

const likeList = ref<Array<any>>([])
const loading = ref<boolean>(true)

onMounted(async () => {
    // 获取音乐详情
    const data = await getMusicDetail({ ids: musicLikeListId.value.join(",") })
    // 判断返回状态
    if (data.code === "success") {
        // 判断返回状态码
        if (data.data.code === 200) {
            // 将返回的数据赋值给likeList
            likeList.value = data.data.songs ? data.data.songs : []
        }
        // 将loading设置为false
        loading.value = false
    }
})
//播放当前全部历史歌曲
const playAllSong = () => {
    playList.value = likeList.value
    songInfo.value = likeList.value[0]
}
</script>

<style lang="scss" scoped>
.like {
    width: 100%;
    height: 87%;
    color: aliceblue;
    overflow: auto;
    margin-top: 8%;
    position: relative;

    .top {
        display: flex;
        color: rgb(182, 198, 212);
        position: relative;
        padding: 0 3vw;
        font-size: 2vw;
        padding-bottom: 2vw;

        >img {
            width: 20%;
            height: 25vh;
            border-radius: 10px;
            margin-right: 2vw;

        }
    }
}

.history-play-list-title {
    position: relative;
    >div {
        font-size: 18px;
        font-weight: 700;
    }

    >button {
        position: absolute;
        bottom: 0;
        min-width: 10vw;
        border: 0;
        border-radius: 4px;
        padding: 6px 26px;
        font-size: 10px;
        color: #000;
        font-weight: 700;
        cursor: pointer;
    }
}

.user {
    margin-top: 10px;
    display: flex;
    align-items: center;

    img {
        width: 2.5vw;
        height: 2.5vw;
        border-radius: 50px;
    }

    >div {
        margin-left: 0.4vw;
        font-size: 10px;
        font-weight: 100;
    }
}

.like::-webkit-scrollbar {
    display: none;
}
</style>